<template>
	<view class="bg">
		<!-- 自定义导航栏 -->
		<view :style="{ height: navBarHeight + 'px' }" class="custom-nav-bar"></view>
		<view class="bannerBox">
			<view class="textBox">
				<view class="title">合同智审宝</view>
				<view class="tag"><span>安 全</span><span>精 准</span><span>高 效</span></view>
			</view>
		</view>
		<view class="bgc"></view>
		<view class="move2top">
			<view class="topTag">
				<view class="tagBox">
					<view class="imageBox"><image src="@/static/aq.png" mode="aspectFit"></image></view>
					<view class="textBox">隐私安全</view>
				</view>
				<view class="tagBox">
					<view class="imageBox"><image src="@/static/ks.png" mode="aspectFit"></image></view>
					<view class="textBox">快速审查</view>
				</view>
				<view class="tagBox">
					<view class="imageBox"><image src="@/static/jy.png" mode="aspectFit"></image></view>
					<view class="textBox">合理建议</view>
				</view>
				<view class="tagBox">
					<view class="imageBox"><image src="@/static/ld.png" mode="aspectFit"></image></view>
					<view class="textBox">漏洞排查</view>
				</view>
			</view>
			
			<view class="main">
				<view class="imageBox"><image src="@/static/tj.png" mode="aspectFit"></image></view>	
				<view class="text">请先上传一份合同<br />帮助您快速精准的排查合同中的陷阱
					
				</view>
			</view>
			<view class="bottom">
				<view class="list" @click="showList()">
					<view class="item">
						<u-icon name="file-text" color="#303133" size="24"></u-icon>
					</view>
					<view class="item">近期合同审查列表</view>
					<view class="item">
						<u-icon name="arrow-right" color="#303133" size="18"></u-icon>
					</view>
				</view>
				<view class="" @click="selectUpLoadFlag = true"><u-button type="primary" text="选择合同"></u-button></view>
			</view>
		</view>

	</view>
	
	<!-- 最近记录 -->
	<up-popup :show="showChooseUp" :round="10" mode="bottom" @close="showChooseUp = false">
		<view class="nearList">最近记录</view>
		<view class="content-main">
			<view class="main-box" v-if="aiTaskList.length!=0" v-for="item in aiTaskList" :key="item.taskId"  @click="showDetail(item)">
				<view class="main-box_title">{{item.taskType}}</view>
				<view style="font-size: 26rpx;">{{item.taskNumber}}</view>
				<view class="main-box_status">
						<view style="color: #e6a23c;" v-if="item.taskStatus == 0" class="">处理中</view>
						<view style="color: #409EFF;" v-else-if="item.taskStatus == 1" class="">排队中</view>
						<view style="color: #67c23a;" v-else-if="item.taskStatus == 2" class="">已完成</view>
						<view style="color: #fa3534;" v-else class="">失败</view>
						
						<view v-if="item.taskStatus != 0" class="detBtn" @click.stop.prevent="[show = true,taskId = item.taskId]">删除</view>
				</view>
			</view>
			<view v-else style="text-align: center;font-size: 40rpx;color: #000;font-weight: 600;width: 100%;">暂无数据</view>
		</view>
	</up-popup>
	

	
	<!-- 选择上传文件方式 -->
	<up-popup :show="selectUpLoadFlag" :round="10" mode="bottom" @close="selectUpLoadFlag = false">
		<view class="nearList">请选择合同上传方式</view>
		<view class="choose-up">
			<view class="choose-up_item" v-for="(item, index) in toolList" :key="index" @click="changeChoose(item)">
				<!-- 功能列表 -->
				<view class="choose-up_itemTop">
					<u-icon :name="item.pic" color="#303133" size="26"></u-icon>
				</view>
				<view class="choose-up_name">{{ item.name }}</view>
			</view>
			<view class="choose-up_item" @click="checkFiles()">
				<view class="choose-up_itemTop">
					<u-icon name="attach" color="#303133" size="26"></u-icon>
				</view>
				<view class="choose-up_name">文件</view>
			</view>
		</view>
	</up-popup>
	
	<up-popup :show="show" mode="center"  @close="show = false" @open="show = true">
		<view style="padding: 40rpx;">
			<text>是否删除当前合同分析成果？</text>
		</view>
		<view class="" style="display: flex;justify-content: space-around;padding-bottom: 40rpx;">
			<view class=""  @click="show = false"><u-button type="info" text="取消"></u-button></view>
			<view class=""  @click="deleteInfo"><u-button type="error" text="确定"></u-button></view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, onMounted, reactive } from 'vue';
	import { useAuthStore } from '@/store/index';
	import { getAiAskList, detContractTask } from '@/api/list.js';
	import { getToken, globalHeaders } from '@/utils/auth';
	import { onHide } from '@dcloudio/uni-app'
	
	const authStore = useAuthStore();
	const navBarHeight = ref(0);
	const showChooseUp = ref(false)
	const aiTaskList = ref([])
	const show = ref(false)
	const taskId = ref('')
	const queryParams = ref({
		pageNum: 1,
		pageSize: 2,
		userId: authStore.userId
	})
	
	const selectUpLoadFlag = ref(false)
	const toolList = reactive([
		{
			name:'相机',
			pic:'camera-fill'
		},
		{
			name:'相册',
			pic:'photo-fill'
		}
	])
	
	const getList = async () => {
		const res = await getAiAskList(queryParams.value)
		if(res.data.code === 200) {
			aiTaskList.value = res.data.rows
		}else {
			setTimeout(() => {
				uni.redirectTo({
				  url:'/pages/login/index'
				})
			}, 1000);
		}
	}
	
	const showList = async () => {
		showChooseUp.value = true
		if(authStore.userId == '') {
			await authStore.getInfoData()
			setTimeout(async()=>{
				queryParams.value.userId = uni.getStorageSync('loginInfo').user.userId
				await getList()
			},1000)
		}else {
			queryParams.value.userId = authStore.userId
			await getList()
		}
	}
	
	// 点击功能
	const changeChoose = (data) => {
		let token = getToken()
		
		if(token == ''){
			uni.redirectTo({
				url:'/pages/login/index'
			});
		}else {
			uni.navigateTo({
			  url:`/pages/upLoad/index?name=${data.name}`
			})
		}
	}
	
	const checkFiles = () => {
		let token = getToken()
		if(token == ''){
			uni.redirectTo({
				url:'/pages/login/index'
			});
		}else {
			uni.navigateTo({
			  url:`/pages/upLoad/index?name=文件`
			})
		}
	}
	
	const showDetail = (item) => {
		if(item.taskStatus == 2) {
			uni.navigateTo({
			    url: `/pages/index/index?taskId=${item.taskId}`
			});
		}
	}
	
	const deleteInfo = async () => {
		const res = await detContractTask(taskId.value)
		if(res.data.code == 200){
			show.value = false
			uni.showToast({
			  title: '删除成功！'
			})
			await getList()
		}
	}
	
    onHide(() => {
        selectUpLoadFlag.value = false
		showChooseUp.value = false
    })
	
	onMounted(async () => {
	    try {
	        const res = await uni.getSystemInfo();
	        // 获取状态栏高度（刘海高度）
	        const statusBarHeight = res.statusBarHeight;
	        // 标准导航栏高度，一般为 44px（iOS）或 48px（Android）
	        const defaultNavBarHeight = res.platform === 'ios' ? 44 : 48;
	        // 计算自定义导航栏的高度
	        navBarHeight.value = statusBarHeight + defaultNavBarHeight;
			
	    } catch (error) {
	        console.error('获取设备信息失败:', error);
	    }
	});
</script>
<style>
	.u-tabbar-item {
		padding-top: 10px;
	}
	.u-page__item__slot-icon{
		width: 30px;
		height: 30px;
	}
</style>

<style scoped>
	.custom-nav-bar {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		z-index: 99;
	}
	.bg {
		background-color: #F2F3F5;
	}
	.bannerBox {
		background: url('https://www.zxsl.zxmap.cn/zxch-app/2025/07/01/e7af1a94f3054c85b7a761989e604ac9.png') no-repeat;
		background-size: cover;
		height: 320rpx;
		position: relative;
	}
	.bannerBox .textBox {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 60rpx;
		font-weight: 600;
	}
	.bannerBox .textBox .tag {
		font-size: 30rpx;
		color: #909399;
		display: flex;
		justify-content: space-around;
		margin-top: 10rpx;
	}
	.bgc {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
	}
	.move2top {
		transform: translateY(-100rpx);
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100vw;
	}
	.topTag {
		margin: 0 auto;
		height: 200rpx;
		border-radius: 40rpx;
		background-color: #F2F3F5;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
	}
	.topTag .tagBox .imageBox{
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	.topTag .tagBox image {
		width: 100%;
		height: 100%;
	}
	.topTag .tagBox .textBox {
		font-size: 30rpx;
		text-align: center;
	}
	.main{
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	.main .imageBox {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}
	.main .imageBox image {
		width: 100%;
		height: 100%;
	}
	.main .text {
		text-align: center;
		color: #909399;
		font-size: 28rpx;
	}
	.bottom {
		margin: 0 auto;
	}
	.bottom .list{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		margin: 60rpx 0 30rpx 0;
	}
	.bottom .list .item {
		height: 100%;
	}
	.moreList {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 10px 10px 0 0;
	}
	
	.nearList {
		padding: 10px;
		font-size: 20px;
		font-weight: 600;
	}
	.swiperBox {
		position: fixed;
		top: 50%;
		left: 0;
		width: 100vw;
		transform: translateY(-50%);
	}
	.detBtn {
		box-sizing: border-box;
		width: 120rpx;
		border: 1px solid #F56C6C;
		color: #F56C6C;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	
	.choose-up {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.choose-up_item {
		border-radius: 10px;
		text-align: center;
		background-color: #F2F3F5;
		padding: 10px 20px;
		margin: 20px 5px;
		display: flex; /* 新增，使用 flex 布局 */
		flex-direction: column; /* 新增，垂直排列子元素 */
		align-items: center; /* 新增，水平居中 */
		justify-content: center; /* 新增，垂直居中 */
	}
	
	.choose-up_name {
		color: #6b6b6b;
		font-size: 14px;
		margin-top: 2px;
	}
	
	.content-main {
		overflow-y: auto;
		padding: 20px 10px;
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		/* justify-content: space-between; */
	}
	
	.main-box {
		width: calc(50% - 7.5px); /* 固定宽度计算（减去间隙的一半） */
		min-width: 0; /* 防止内容溢出影响布局 */
		border-radius: 15px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		padding: 20px;
		/* 添加以下属性确保内容不会撑开盒子 */
		overflow: hidden;
		word-break: break-word; /* 长文本自动换行 */
		box-shadow: 0 0px 10px #666;
	}
	
	.main-box_title {
	    display: -webkit-box; /* 关键属性 */
		-webkit-box-orient: vertical; /* 文字垂直排列 */
		-webkit-line-clamp: 2; /* 限制显示两行 */
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5; /* 建议设置行高，避免文字重叠 */
		font-weight: 600;
		font-size: 20px;
	}
	
	.main-box_status {
		display: flex;
		flex-direction: row;
		margin-top: 10px;
		justify-content: space-between;
		align-items: center;
	}
</style>